<template>
  <view class="content">
    <view class="top">
      <swiper class="swiper" circular autoplay :interval="5000" :duration="1000">
        <swiper-item>
          <image src="https://yidui.jiujiefang7979.cn/static/images/banner.png" mode="widthFix" style="width: 100%" lazy-load></image>
        </swiper-item>
        <swiper-item>
          <image src="https://yidui.jiujiefang7979.cn/static/images/banner1.jpg" @click="goto1('/pages/mall/index/cart')" mode="widthFix" style="width: 100%" lazy-load></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="dog">
      <image src="/static/images/bj.png" mode="widthFix" style="width: 100%; display: block" lazy-load></image>
      <view class="dog_icon">
        <view class="menu_l">
          <image @click="goto('/pages/dog/myl/index')" src="/static/images/icon/wdmyl.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="goto('/pages/dog/myl/index')" class="text wdmyl">我的沐浴露</view>
          <image @click="goto('/pages/dog/groups/index')" src="/static/images/icon/wdgq.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="goto('/pages/dog/groups/index')" class="text wdgq">我的狗圈</view>
          <image @click="goto('/pages/dog/company/index')" src="/static/images/icon/wdhb.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="goto('/pages/dog/company/index')" class="text wdhb">我的伙伴</view>
        </view>
        <view  v-if="1 == mallconfig" @click="goto('/pages/dog/myyg')" class="one_bj one_s"> 开始游戏 </view>
        <view class="menu_r">
          <image @click="openProtocol" src="/static/images/icon/xrzs.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="openProtocol" class="text xrzs">规则说明</view>
          <image @click="goto('/pages/dog/claim-success')" src="/static/images/icon/rlq.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="goto('/pages/dog/claim-success')" class="text rlq">成功置换区</view>
          <image @click="goto('/pages/dog/myShare')" src="/static/images/icon/wyfx.png" class="img" mode="widthFix" lazy-load></image>
          <view @click="goto('/pages/dog/myShare')" class="text wyfx">我要分享</view>
          <image v-if="1 == adopt_state" @click="goto('/pages/dog/claim')" src="/static/images/icon/wyyg.png" class="img" mode="widthFix" lazy-load></image>
          <view v-if="1 == adopt_state" @click="goto('/pages/dog/claim')" class="text wyyg">认领区</view>
        </view>
      </view>
      <view class="clean_view">
        <image v-if="0 == show_wash_state" src="/static/images/clean_dog.png" mode="widthFix" style="width: 56%; margin-left: 22%" lazy-load></image>
        <template v-else>
          <image src="/static/images/zang.png" mode="widthFix" style="width: 56%; margin-left: 22%" lazy-load></image>
          <div class="fly" style="top: 30px; left: 40%"></div>
          <div class="fly" style="top: 20px; left: 30%; animation-delay: -1s"></div>
          <div class="fly" style="top: 20px; left: 60%; animation-delay: -2s"></div>
          <div class="fly" style="top: 40px; left: 50%; animation-delay: -3s"></div>
        </template>
      </view>
      <view class="one">
        <view @click="onWashBatch" class="one_bj one_l"> 一键洗澡 </view>
        <view @click="onGoodsLaunchOnce" class="one_bj one_r"> 一键置换 </view>
      </view>
      <view v-if="1 == mallconfig" class="menu">
        <!--        <view @click="goto('/pages/mall/index/index')" class="menu_i">
          <image src="/static/images/icon/m_scdh.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text scdh">商城兑换</view>
        </view>
        <view @click="goto('/pages/mall/index/city')" class="menu_i">
          <image src="/static/images/icon/m_tcsj.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text tcsj">换换猫</view>
        </view>
        <view @click="goto('/pages/mall/index/member')" class="menu_i">
          <image src="/static/images/icon/m_hyzx.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text hyzx">会员中心</view>
        </view> -->

        <!-- <view @click="goto_no" class="menu_i">
          <image src="/static/images/icon/m_scdh.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text scdh">商城兑换</view>
        </view> -->
        <view   @click="goto('/pages/mall/index/city')" class="menu_i">
          <image src="/static/images/icon/m_tcsj.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text tcsj">换换猫</view>
        </view>
        <view @click="goto('/pages/mall/index/member')" class="menu_i">
          <image src="/static/images/icon/m_hyzx.png" class="img" mode="widthFix" lazy-load></image>
          <view class="text hyzx">会员中心</view>
        </view>
      </view>
    </view>

    <uni-drawer :width="windowWidth" ref="showProtocolRef" mode="right" :mask-click="false">
      <uni-nav-bar @clickLeft="closeProtocol" left-icon="left" title="规则说明" />
      <scroll-view scroll-y="true" style="height: 95vh">
        <view class="container_drawer">
          <view class="title">痒痒狗游乐园</view>
          <view class="title">游戏规则及平台功能概况</view>
          <view class="text-center">（2025-11-10版）</view>
          <view class="content_drawer">
            【痒痒狗游乐园】是一款休闲养狗游戏，玩家可通过平台认可的沐浴露等商品置换游戏电子狗，并参与给狗进行洗澡等线上游戏养狗，按游戏规则所养成的狗被其他玩家认领置换后，可获得沐浴露或线下提货额度等奖励。
          </view>

          <view class="section">
            <view class="section-title">一、置换领养电子狗</view>
            <view class="content_drawer">
              会员在痒痒狗合作的平台、商城或换换猫消费，获得商家赠送的沐浴露，会员可用沐浴露置换平台的电子狗，来参与养狗游戏。
              <view class="item">置换领养比例：13包沐浴露可置换1只电子狗</view>
            </view>
          </view>

          <view class="section">
            <view class="section-title">二、养狗游戏</view>
            <view class="subsection">
              <view class="subsection-title">【洗澡养狗】</view>
              <view class="content_drawer">
                <view class="item">1、置换的狗，自第1次洗澡，则为激活，洗澡满2次为完成一轮游戏。</view>
                <view class="item">2、每次洗澡后3小时后才能洗下一次。</view>
              </view>
            </view>
            <view class="subsection">
              <view class="subsection-title">【休闲游戏】</view>
              <view class="content_drawer">
                参与与狗有关的各类游戏（开发中）。
              </view>
            </view>
          </view>

          <view class="section">
            <view class="section-title">三、游戏奖励</view>
            <view class="content_drawer">
              <view class="item">1、养狗奖励：每只狗完成一轮游戏养成后，平台奖励3只狗，原来的狗退休由平台回收。则总共可获得3只狗。所奖励的狗可以置换成提货额度与沐浴露。</view>
              <view class="item">2、商品奖励：</view>
              <view class="item-indent">额度兑换：自每组提交置换开始，每周可释放7%狗，每只狗可兑换7元的消费额度，玩家可凭额度（提货额）到入驻同城生活平台【换换猫】的额度商家全额无现金消费商品与服务。</view>
              <view class="item-indent">沐浴露兑换：需等待一定时间，每只狗可兑换7袋沐浴露。等待时间长短根据平台规则与来领养狗狗的玩家数量情况，【痒痒狗】不承诺具体的时长。玩家狗狗置换成功获得的沐浴露同样可以到入驻同城生活平台【换换猫】的额度商家全额无现金消费商品与服务。也可以继续去领养狗狗再次养狗游戏。</view>
              <view class="item">玩家可自主选择将奖励的狗按上述规则兑换成“额度”或“沐浴露”。</view>
              <view class="item">3、休闲游戏：玩家参与与狗有关的休闲游戏后可获得其它奖励（开发中）。</view>
            </view>
          </view>

          <view class="section">
            <view class="section-title">四、新客试玩</view>
            <view class="content_drawer">
              免费注册成为养狗玩家后，平台赠送1只狗试玩。
            </view>
          </view>

          <view class="content_drawer">
            注：本规则自2025年11月10日起更新生效，原规则作废。
          </view>
        </view>
        <!-- <rich-text :nodes="protocol"></rich-text> -->
      </scroll-view>
    </uni-drawer>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { washBatch, goodsLaunchOnce, getWashStateIndex, getAdoptState } from '@/api/bgame';
import { useUserStoreHook } from '@/store/user';
const show_wash_state = ref(0);

/**
 * 检查手机号是否已绑定
 */
const checkPhoneBinding = () => {
  if (mallconfig.value !== 1) {
    console.log('【会员中心调试】mallconfig 非 1，无需校验，值：', mallconfig.value);
    return true;
  }
  const phone = uni.getStorageSync('phone');
  console.log('【会员中心调试】mallconfig 为 1，当前缓存手机号：', phone);
  if (!phone) {
    uni.showModal({
      title: '提示',
      content: '使用此功能需要先绑定手机号',
      confirmText: '去绑定',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          console.log('【会员中心调试】用户选择去绑定');
          uni.navigateTo({
            url: '/pages/login/bind-mobile',
            success: () => console.log('【会员中心调试】跳转绑定页成功'),
            fail: (err) => console.log('【会员中心调试】跳转绑定页失败', err),
            complete: () => console.log('【会员中心调试】跳转绑定页完成'),
          });
        } else {
          console.log('【会员中心调试】用户取消绑定，返回上一步');
        }
      }
    });
    console.log('【会员中心调试】检测到未绑定手机号，返回失败');
    return false;
  }
  console.log('【会员中心调试】已绑定手机号，允许访问');
  return true;
};

const goto = (path) => {
  console.log('【会员中心调试】进入 goto，目标路径：', path);
  // 仅在 mallconfig 为 1 时检查手机号绑定
  if (
    mallconfig.value === 1 &&
    (path === '/pages/dog/myl/index' || path === '/pages/dog/groups/index')
  ) {
    console.log('【会员中心调试】需要校验手机号，mallconfig：', mallconfig.value, '当前路径：', path);
    if (!checkPhoneBinding()) {
      console.log('【会员中心调试】未通过手机号校验，终止跳转');
      return;
    }
  }
  
  console.log('【会员中心调试】通过校验，执行跳转');
  uni.navigateTo({
    url: path,
    success: () => console.log('【会员中心调试】跳转成功，目标：', path),
    fail: (err) => console.log('【会员中心调试】跳转失败，目标：', path, err),
    complete: () => console.log('【会员中心调试】跳转完成，目标：', path),
  });
};
const adopt_state = computed(() => {
  return uni.getStorageSync('adopt_state') || 0;
});
const mallconfig = ref(0);

const user_id = ref(0);
const goto1 = (path) => {
  if (1 == mallconfig.value) {
    uni.navigateTo({
      url: path,
      success: () => console.log('【会员中心调试】goto1 跳转成功，目标：', path),
      fail: (err) => console.log('【会员中心调试】goto1 跳转失败，目标：', path, err),
      complete: () => console.log('【会员中心调试】goto1 跳转完成，目标：', path),
    });
  }
};
const goto_no = () => {
  uni.showToast({
    title: '开发中,尽请期待。。。',
    icon: 'none',
  });
};
const initGetAdoptState = async () => {
  const res: any = await getAdoptState({});
  console.log('res', res);
  if (1 == res.result) {
    uni.setStorageSync('adopt_state', res.data.adopt_state || 0);
  }
};
const windowWidth = ref(0);
const setDrawerWidth = () => {
  let info = uni.getSystemInfoSync();
  console.log(info);
  windowWidth.value = info.windowWidth;
};

const showProtocolRef = ref();
const openProtocol = () => {
  showProtocolRef.value.open();
};
const closeProtocol = () => {
  showProtocolRef.value.close();
};
setDrawerWidth();
const onGoodsLaunchOnce = async () => {
  // 仅在 mallconfig 为 1 时检查是否已绑定手机号
  if (mallconfig.value === 1 && !checkPhoneBinding()) {
    return;
  }
  
  uni.showLoading({
    title: '投放中...',
    mask: true,
  });
  if (0 == mallconfig.value && !uni.getStorageSync('user_id')) {
    setTimeout(() => {
      uni.showToast({
        title: '投放成功',
        icon: 'none',
      });
    }, 1000);
    return;
  }
  const res = await goodsLaunchOnce({});
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '投放成功',
      icon: 'none',
    });
    getData();
  } else {
    uni.showToast({
      title: res.msg.msg || '投放失败',
      mask: true,
      icon: 'error',
    });
  }
};
const onWashBatch = async () => {
  // 仅在 mallconfig 为 1 时检查是否已绑定手机号
  if (mallconfig.value === 1 && !checkPhoneBinding()) {
    return;
  }
  
  uni.showLoading({
    title: '清洗中...',
    mask: true,
  });
  if (0 == mallconfig.value && !uni.getStorageSync('user_id')) {
    setTimeout(() => {
      uni.showToast({
        title: '清洗成功',
        icon: 'none',
      });
    }, 1000);
    return;
  }
  const res = await washBatch({});
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '清洗成功',
      icon: 'none',
    });
    getData();
  } else {
    uni.showToast({
      title: res.msg.msg || '清洗失败',
      mask: true,
      icon: 'error',
    });
  }
};
const getData = async () => {
  const res: any = await getWashStateIndex({});
  if (1 == res.result) {
    const { wash_state = 0 } = res.data || {};
    // show_wash_state.value = show_wash_state.value > 0 ? 0 : 1;
    show_wash_state.value = wash_state || 0;
  }
};

// 在页面的onLoad方法中调用
onShow(async () => {
  initGetAdoptState();
  await useUserStoreHook().getSign();
  uni.getStorageSync('phone') && getData();
  mallconfig.value = uni.getStorageSync('mallconfig') || 0;
  user_id.value = uni.getStorageSync('user_id') || 0;
});
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 44px);
  width: 100%; /* 确保页面宽度填充整个屏幕 */
  background-color: #73b81d;
  .top {
    height: auto;
    .swiper {
      width: 100%;
      height: calc(100vw * 0.328); /* 假设图片是16:9的比例，根据实际需求调整 */
    }
  }
  .dog {
    position: relative;

    .dog_icon {
      position: absolute;
      top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .menu_l {
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100px;
        text-align: center;
        font-weight: bold;
        .text {
          margin-top: -5px;
          color: #fff;
          font-size: 1rem;
          z-index: 100;
          margin-bottom: 24rpx;
        }
        .wdmyl {
          text-shadow: 0 0 4rpx #eb910e, 0 0 10rpx #eb910e, 0 0 20rpx #eb910e;
        }
        .wdgq {
          text-shadow: 0 0 4rpx #20b537, 0 0 10rpx #20b537, 0 0 20rpx #20b537;
        }
        .wdhb {
          text-shadow: 0 0 4rpx #218df2, 0 0 10rpx #218df2, 0 0 20rpx #218df2;
        }
        .rlq1 {
          text-shadow: 0 0 4rpx #8d2ef9, 0 0 10rpx #8d2ef9, 0 0 20rpx #8d2ef9;
        }
        .img {
          width: 90rpx;
          display: block;
        }
      }
      .one_s {
        background-image: url('/static/images/icon/one_s.png');
      }
      .one_bj {
        width: 250rpx;
        height: 76rpx;
        background-size: cover; /* 等比例缩放并覆盖整个背景区域 */
        background-position: center; /* 图片居中显示 */
        background-repeat: no-repeat; /* 图片不重复 */
        text-align: center;
        line-height: 70rpx;
        color: white;
        font-size: 1.2rem;
      }
      .start_play {
        color: white;
        background-color: red;
        display: block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 10px;
        margin-top: 10px;
      }
      .menu_r {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100px;
        text-align: center;
        font-weight: bold;
        .text {
          margin-top: -5px;
          color: #fff;
          font-size: 1rem;
          z-index: 100;
          margin-bottom: 20rpx;
        }
        .yxgz {
          color: #b16b20;
          background-color: #ffede6;
          border: #ffbe9c 1px solid;
          width: 5rem;
          margin-right: -1rem;
          border-radius: 1rem;
          font-size: 0.8rem;
          height: 1.4rem;
          line-height: 1.4rem;
          margin-bottom: 20rpx;
        }
        .xrzs {
          text-shadow: 0 0 4rpx #fa5754, 0 0 10rpx #fa5754, 0 0 20rpx #fa5754;
        }
        .wyyg {
          text-shadow: 0 0 4rpx #218df2, 0 0 10rpx #218df2, 0 0 20rpx #218df2;
        }
        .rlq {
          text-shadow: 0 0 4rpx #8d2ef9, 0 0 10rpx #8d2ef9, 0 0 20rpx #8d2ef9;
        }
        .wyfx {
          text-shadow: 0 0 4rpx #ff6a00, 0 0 10rpx #ff6a00, 0 0 20rpx #ff6a00;
        }

        .img {
          width: 90rpx;
          display: block;
        }
      }
    }
    .clean_view {
      position: absolute;
      top: 620rpx;
      width: 100%;
      // text-align: center;
      padding-left: 20rpx;
    }
    .one {
      position: fixed;
      bottom: 190rpx;
      left: 0;
      display: flex;
      justify-content: space-between;
      height: 76rpx;
      width: 100%;
      padding: 0 20rpx;
      .one_bj {
        width: 250rpx;
        height: 76rpx;
        background-size: cover; /* 等比例缩放并覆盖整个背景区域 */
        background-position: center; /* 图片居中显示 */
        background-repeat: no-repeat; /* 图片不重复 */
        text-align: center;
        line-height: 70rpx;
        color: white;
        font-size: 1.2rem;
      }
      .one_l {
        background-image: url('/static/images/icon/one_x.png');
      }
      .one_r {
        background-image: url('/static/images/icon/one_f.png');
      }
    }
    .menu {
      position: fixed;
      bottom: 30rpx;
      left: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 0 40rpx;
      gap: 60rpx;
      .menu_i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        .text {
          margin-top: -10px;
          color: #b16b20;
          background-color: white;
          font-size: 0.7rem;
          z-index: 100;
          margin-bottom: 24rpx;
          border-radius: 20rpx;
          padding: 0 5rpx;
        }
        .img {
          width: 120rpx;
          display: block;
        }
      }
    }
  }
}

.flying-image {
  position: absolute;
  width: 10px; /* 根据需要调整图片大小 */
  height: auto;
  animation: fly 5s linear infinite; /* 应用飞舞动画 */
}

@keyframes fly {
  0% {
    top: 50vh; /* 起始位置在视口上方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
  }
  25% {
    top: 60;
    left: 40%;
    transform: translate(-50%, -50%); /* 斜向移动并调整位置 */
  }
  50% {
    top: 70vh; /* 移动到视口下方附近 */
    left: 70%;
    transform: translate(-50%, -50%);
  }
  75% {
    top: 60vh;
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    top: 50vh;
    left: 50%;
    transform: translateX(-50%);
  }
}

.fly {
  position: absolute; /* 使用绝对定位来限制飞行区域 */
  top: 50px;
  width: 20px; /* 根据需要调整图片大小 */
  height: 20px;
  background-image: url('/static/images/icon/cangyin.png'); /* 替换为你的苍蝇图片路径 */
  background-size: contain;
  animation: flyLikeAFly 10s linear infinite; /* 应用飞舞动画 */
}

@keyframes flyLikeAFly {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  10% {
    transform: translateX(40px) translateY(-20px) rotate(15deg);
  }
  20% {
    transform: translateX(-30px) translateY(40px) rotate(-10deg);
  }
  30% {
    transform: translateX(60px) translateY(0) rotate(25deg);
  }
  40% {
    transform: translateX(-40px) translateY(30px) rotate(-20deg);
  }
  50% {
    transform: translateX(20px) translateY(-40px) rotate(10deg);
  }
  60% {
    transform: translateX(-10px) translateY(50px) rotate(-30deg);
  }
  70% {
    transform: translateX(80px) translateY(10px) rotate(35deg);
  }
  80% {
    transform: translateX(-20px) translateY(20px) rotate(-25deg);
  }
  90% {
    transform: translateX(10px) translateY(-10px) rotate(15deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}

.container_drawer {
  padding: 10px;
  view {
    text-indent: 1rem;
  }
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.text-center {
  text-align: center;
}

.section-title,
.subsection-title {
  font-size: 16px;
  font-weight: bold;
}

.content_drawer {
  font-size: 16px;
  line-height: 1.5;
}
</style>
